<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 200px;background: gray;position: absolute;left: -100px;top: 400px;}
        #div1 span{width: 20px;height: 60px;background: orange;position: absolute;left: 100px;top: 70px;line-height: 20px;}
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function(){
                startMove(5,0);
            }
            oDiv.onmouseout = function(){
                startMove(-5,-100);
            }
        }
        var timer = null;
        function startMove(speed,targer){
            var oDiv = document.getElementById("div1");
            clearInterval(timer);
            timer = setInterval(function(){
                if((oDiv.offsetLeft >= targer && targer>=0)||(oDiv.offsetLeft<=targer)&&targer<0){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + speed +"px";
                }
            },30)
        }
        // function startMove2(){
        //     var oDiv = document.getElementById("div1");
        //     var speed = 5;
        //     clearInterval(timer);
        //     timer = setInterval(function(){
        //         if(oDiv.offsetLeft <= -100){
        //             clearInterval(timer);
        //         }else{
        //             oDiv.style.left = oDiv.offsetLeft - speed +"px";
        //         }
        //     },30)
        // }
    </script>
</head>
<body>
    <div id="div1">
        <span>分享到</span>
    </div>
</body>
</html>